<template>
  <div :id="'chartWater' + props.chartId" ref="chart" class='wh-full'></div>
</template>
<script setup>
import 'echarts-liquidfill';
import * as echarts from 'echarts';

const chart = ref(null);
const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  rate: {
    type: [String,Number],
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  chartId: {
    type: [String,Number],
    default: ''
  },
  color: {
    type: String,
    default: '#fff'
  },
  titleBottom: {
    type: String,
    default: '15%'
  }
});
const drawChart = () => {
  const myChart = echarts.init(
    document.getElementById(`chartWater${props.chartId}`)
  );
  const option = {
    title: [
      {
        text: props.name,
        bottom: props.titleBottom,
        left: 'center',
        textStyle: {
          fontSize: '14',
          fontWeight: '400',
          color: '#333'
        }
      }
    ],
    series: [
      {
        name: '最外层-虚线',
        type: 'gauge',
        radius: '80%',
        center: ['50%', '40%'],
        startAngle: -45,
        endAngle: 225,
        axisLine: {
          show: false
        },
        axisTick: {
          distance: -7,
          length: 4,
          lineStyle: {
            color: props.color,
            width: 10,
            opacity: 1
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        }
      },
      {
        name: '最外层-虚线',
        type: 'gauge',
        radius: '80%',
        center: ['50%', '40%'],
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: false
        },
        axisTick: {
          distance: -6,
          length: 2,
          lineStyle: {
            color: props.color,
            width: 1,
            type: [20],
            dashOffset: 15,
            opacity: 0.8
          },
          splitNumber: 8
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        }
      },
      {
        type: 'liquidFill',
        radius: '62%',
        z: 5,
        center: ['50%', '40%'],
        amplitude: 4,
        backgroundStyle: {
          color: 'transparent'
        },
        color: [props.color, props.color, props.color],
        data: [
          props.value + 0.02,
          {
            value: props.value - 0.01,
            direction: 'left'
          },
          props.value - 0.01
        ],
        label: {
          position: ['50%', '50%'],
          formatter: function (params) {
            return props.rate;
          },
          fontSize: 14,
          color: '#333'
        },
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: props.color
          }
        }
      }
    ]
  };
  myChart.setOption(option);
};
onMounted(() => {
  drawChart();
});
watch(
  () => props.value,
  () => {
    drawChart();
  },
  {
    deep: true
  }
);
</script>
<style lang="scss" scoped></style>
